<template>
    <view class="page bgf8 flexac" :style="{'--total-height': totalHeight + 'px'}">
        <status-bar title=' ' hideBg></status-bar>
        <view class="title size26 color_33">请签署协议</view>
        <view class="handCenter">
            <canvas class="bgwhite" 
                :style="{width: '520rpx', 'height': canvasH - 10 + 'px'}"
                canvas-id="handWriting" 
                :disable-scroll="true" 
                @touchstart="uploadScaleStart" 
                @touchmove="uploadScaleMove"
                @touchend="uploadScaleEnd">
            </canvas>
        </view>
        <view class="btns d-flex white">
            <view class="flexac size26 m-right30" @click.stop="retDraw">重签</view>
            <view class="flexac size26" @click.stop="subCanvas">确认</view>
        </view>
    </view>
</template>

<script>
import {mapState} from 'vuex'
export default {
    computed: {
        ...mapState(['totalHeight','System'])
    },
    data() {
      return {
        // 用于接口
        type: '',
        store_id: '',
        signature_img: '', 

        // canvas相关
        canvasH: 0,
        canvasName: 'handWriting',
        ctx: '',
        canvasWidth: 0,
        canvasHeight: 0,
        lineColor: '#1A1A1A', // 颜色
        transparent: 1, // 透明度
        currentLine: [], // 当前线条
        currentPoint: {},
        firstTouch: true, // 第一次触发
        cutArea: { //裁剪区域
          top: 0,
          right: 0,
          bottom: 0,
          left: 0
        }, 
        lastPoint: 0,
        lineSize: 1.5, // 笔记倍数
        chirography: [], //笔迹
        currentChirography: {}, //当前笔迹
        linePrack: [], //划线轨迹 , 生成线条的实际点
        radius: 1, //画圆的半径
        smoothness: 60, //顺滑度，用60的距离来计算速度
        lineMin: 0.5, // 最小笔画半径
        lineMax: 4, // 最大笔画半径
        pressure: 1 // 默认压力
      }
    },
    onLoad(e) {
        if(e.type) this.type = e.type
        if(e.store_id) this.store_id = e.store_id

        this.canvasH = this.System.screenHeight - this.System.safeAreaInsets.bottom - this.totalHeight
        this.ctx = uni.createCanvasContext(this.canvasName)
        let query = uni.createSelectorQuery()
        query.select('.handCenter').boundingClientRect(rect => {
            this.canvasWidth = rect.width
            this.canvasHeight = rect.height
            // this.setCanvasBg('#fff')
        }).exec()
    },
    methods: {
        handleSign(){ // 签约
            this.$showLoading('正在发起签约')
            this.$http.post({ 
                url: '/osmxcxApi/submitSigning',
                data: {
                    getType: this.type, // 加盟1、众筹2
                    store_id: this.store_id,
                    signature_img: this.signature_img
                }
            }).then(res=>{
                this.$hideLoading()
                if(res.errcode != 100) return this.$Toast(res.msg)
                if(res.payState == 1) return this.$Toast('您已支付过')
                if(!res.data) return
                this.handlePay(res.data)
            })
        },
        handlePay(agreement_id){ 
            this.$showLoading('支付中...')
            let that = this
            if(this.type == 1){ // 加盟-支付积分
                this.$http.post({
                    url: '/osmxcxApi/payStoreJoin',
                    data: {
                        store_id: this.store_id,
                        agreement_id // 签约id
                    }
                }).then(res=>{
                    this.$hideLoading()
                    if(res.errcode != 100) return this.$Toast(res.msg)
                    this.retDraw()
                    this.toUrl('/joinPage/withdrawSuccess?type=1')
                })
            }
            if(this.type == 2){ // 众筹-微信小程序支付
                this.$http.post({
                    url: '/osmxcxApi/payStoreCrowdfunding',
                    data: {
                        store_id: this.store_id,
                        agreement_id
                    }
                }).then(res1=>{
                    this.$hideLoading()
                    if(res1.errcode != 100) return this.$Toast(res1.msg)
                    uni.requestPayment({
                        provider: 'wxpay',
                        ...res1.data,
                        success(res2){
                            console.log(res2)
                            that.retDraw()
                            that.toUrl('/joinPage/withdrawSuccess?type=2')
                        },
                        fail(err){
                            that.$Toast('支付已取消')
                        }
                    })
                })
            }
        },
        // 确认
        subCanvas() {
            let that = this
            if(!this.linePrack.length) return this.$Toast('签名不能为空！')
            this.$showLoading('正在提交签名')
            uni.canvasToTempFilePath({ // 当前画布内容导出生成图片
                canvasId: 'handWriting',
                fileType: 'png',
                quality: 1,
                async success(res){
                    const result = await that.$common.uploadFiles(res.tempFilePath) // 上传签名图
                    that.$hideLoading()
                    if(result.errcode != 100) return that.$Toast('上传失败')
                    that.signature_img = result.url.substring(23)
                    // that.signature_img = '/Uploads/img2019/7499/6099/202312657c094612c93.png'
                    that.handleSign()
                },
                fail(){
                    that.$Toast('签名失败')
                    that.$hideLoading()
                }
            })
        },
        // 重签
        retDraw() {
            this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
            this.ctx.draw()
            this.linePrack = []
            // this.setCanvasBg("#fff")
        },
        // 笔迹开始
        uploadScaleStart(e) {
            if (e.type != 'touchstart') return false
            let ctx = this.ctx
            ctx.setFillStyle(this.lineColor) // 初始线条设置颜色
            ctx.setGlobalAlpha(this.transparent) // 设置半透明
            let currentPoint = {
                x: e.touches[0].x,
                y: e.touches[0].y
            }
            let currentLine = this.currentLine
            currentLine.unshift({
                time: new Date().getTime(),
                dis: 0,
                x: currentPoint.x,
                y: currentPoint.y
            })
            this.currentPoint = currentPoint
            if (this.firstTouch) {
                this.cutArea = {
                    top: currentPoint.y,
                    right: currentPoint.x,
                    bottom: currentPoint.y,
                    left: currentPoint.x
                }
                this.firstTouch = false
            }
            this.pointToLine(currentLine)
        },
        // 笔迹移动
        uploadScaleMove(e) {
            if (e.type != 'touchmove') return false
            if (e.cancelable) {
                // 判断默认行为是否已经被禁用
                if (!e.defaultPrevented) {
                    e.preventDefault()
                }
            }
            let point = {
                x: e.touches[0].x,
                y: e.touches[0].y
            }

            //测试裁剪
            if (point.y < this.cutArea.top) {
                this.cutArea.top = point.y
            }
            if (point.y < 0) this.cutArea.top = 0

            if (point.x > this.cutArea.right) {
                this.cutArea.right = point.x
            }
            if (this.canvasWidth - point.x <= 0) {
                this.cutArea.right = this.canvasWidth
            }
            if (point.y > this.cutArea.bottom) {
                this.cutArea.bottom = point.y
            }
            if (this.canvasHeight - point.y <= 0) {
                this.cutArea.bottom = this.canvasHeight
            }
            if (point.x < this.cutArea.left) {
                this.cutArea.left = point.x
            }
            if (point.x < 0) this.cutArea.left = 0

            this.lastPoint = this.currentPoint
            this.currentPoint = point
            let currentLine = this.currentLine
            currentLine.unshift({
                time: new Date().getTime(),
                dis: this.distance(this.currentPoint, this.lastPoint),
                x: point.x,
                y: point.y
            })
            this.pointToLine(currentLine)
        },
        // 笔迹结束
        uploadScaleEnd(e) {
            if (e.type != 'touchend') return 0
            let point = {
                x: e.changedTouches[0].x,
                y: e.changedTouches[0].y
            }
            this.lastPoint = this.currentPoint
            this.currentPoint = point
            let currentLine = this.currentLine
            currentLine.unshift({
                time: new Date().getTime(),
                dis: this.distance(this.currentPoint, this.lastPoint),
                x: point.x,
                y: point.y
            })
            //一笔结束，保存笔迹的坐标点，清空当前笔迹
            //增加判断是否在手写区域；
            this.pointToLine(currentLine)
            var currentChirography = {
                lineSize: this.lineSize,
                lineColor: this.lineColor
            }
            var chirography = this.chirography
            chirography.unshift(currentChirography)
            this.chirography = chirography
            var linePrack = this.linePrack
            linePrack.unshift(this.currentLine)
            this.linePrack = linePrack
            this.currentLine = []
        },
        //画两点之间的线条；参数为:line，会绘制最近的开始的两个点；
        pointToLine(line) {
            this.calcBethelLine(line)
            return
        },
        //计算插值的方式；
        calcBethelLine(line) {
            if (line.length <= 1) {
                line[0].r = this.radius
                return
            }
            let x0, x1, x2, y0, y1, y2, r0, r1, r2, len, lastRadius, dis = 0, time = 0, curveValue = 0.5
            if (line.length <= 2) {
                x0 = line[1].x
                y0 = line[1].y
                x2 = line[1].x + (line[0].x - line[1].x) * curveValue
                y2 = line[1].y + (line[0].y - line[1].y) * curveValue
                x1 = x0 + (x2 - x0) * curveValue
                y1 = y0 + (y2 - y0) * curveValue
            } else {
                x0 = line[2].x + (line[1].x - line[2].x) * curveValue
                y0 = line[2].y + (line[1].y - line[2].y) * curveValue
                x1 = line[1].x
                y1 = line[1].y
                x2 = x1 + (line[0].x - x1) * curveValue
                y2 = y1 + (line[0].y - y1) * curveValue
            }
            //从计算公式看，三个点分别是(x0,y0),(x1,y1),(x2,y2) ；(x1,y1)这个是控制点，控制点不会落在曲线上；实际上，这个点还会手写获取的实际点，却落在曲线上
            len = this.distance({ x: x2, y: y2 }, { x: x0, y: y0 })
            lastRadius = this.radius
            for (let n = 0; n < line.length - 1; n++) {
                dis += line[n].dis
                time += line[n].time - line[n + 1].time
                if (dis > this.smoothness) break
            }
            this.radius = Math.min(time / len * this.pressure + this.lineMin, this.lineMax) * this.lineSize
            line[0].r = this.radius
            //计算笔迹半径
            if (line.length <= 2) {
                r0 = (lastRadius + this.radius) / 2
                r1 = r0
                r2 = r1
            } else {
                r0 = (line[2].r + line[1].r) / 2
                r1 = line[1].r
                r2 = (line[1].r + line[0].r) / 2
            }
            let n = 5
            let point = []
            for (let i = 0; i < n; i++) {
                let t = i / (n - 1)
                let x = (1 - t) * (1 - t) * x0 + 2 * t * (1 - t) * x1 + t * t * x2
                let y = (1 - t) * (1 - t) * y0 + 2 * t * (1 - t) * y1 + t * t * y2
                let r = lastRadius + (this.radius - lastRadius) / n * i
                point.push({ x: x, y: y, r: r })
                if (point.length == 3) {
                    let a = this.ctaCalc(point[0].x, point[0].y, point[0].r, point[1].x, point[1].y, point[1].r, point[2].x, point[2].y, point[2].r)
                    a[0].color = this.lineColor
                    this.bethelDraw(a, 1)
                    point = [{ x: x, y: y, r: r }]
                }
            }
            this.currentLine = line
        },
        //求两点之间距离
        distance(a, b) {
            let x = b.x - a.x
            let y = b.y - a.y
            return Math.sqrt(x * x + y * y)
        },
        ctaCalc(x0, y0, r0, x1, y1, r1, x2, y2, r2) {
            let a = [], vx01, vy01, norm, n_x0, n_y0, vx21, vy21, n_x2, n_y2
            vx01 = x1 - x0
            vy01 = y1 - y0
            norm = Math.sqrt(vx01 * vx01 + vy01 * vy01 + 0.0001) * 2
            vx01 = vx01 / norm * r0
            vy01 = vy01 / norm * r0
            n_x0 = vy01
            n_y0 = -vx01
            vx21 = x1 - x2
            vy21 = y1 - y2
            norm = Math.sqrt(vx21 * vx21 + vy21 * vy21 + 0.0001) * 2
            vx21 = vx21 / norm * r2
            vy21 = vy21 / norm * r2
            n_x2 = -vy21
            n_y2 = vx21
            a.push({ mx: x0 + n_x0, my: y0 + n_y0, color: "#1A1A1A" })
            a.push({ c1x: x1 + n_x0, c1y: y1 + n_y0, c2x: x1 + n_x2, c2y: y1 + n_y2, ex: x2 + n_x2, ey: y2 + n_y2 })
            a.push({ c1x: x2 + n_x2 - vx21, c1y: y2 + n_y2 - vy21, c2x: x2 - n_x2 - vx21, c2y: y2 - n_y2 - vy21, ex: x2 - n_x2, ey: y2 - n_y2 })
            a.push({ c1x: x1 - n_x2, c1y: y1 - n_y2, c2x: x1 - n_x0, c2y: y1 - n_y0, ex: x0 - n_x0, ey: y0 - n_y0 })
            a.push({ c1x: x0 - n_x0 - vx01, c1y: y0 - n_y0 - vy01, c2x: x0 + n_x0 - vx01, c2y: y0 + n_y0 - vy01, ex: x0 + n_x0, ey: y0 + n_y0 })
            a[0].mx = a[0].mx.toFixed(1)
            a[0].mx = parseFloat(a[0].mx)
            a[0].my = a[0].my.toFixed(1)
            a[0].my = parseFloat(a[0].my)
            for (let i = 1; i < a.length; i++) {
                a[i].c1x = a[i].c1x.toFixed(1)
                a[i].c1x = parseFloat(a[i].c1x)
                a[i].c1y = a[i].c1y.toFixed(1)
                a[i].c1y = parseFloat(a[i].c1y)
                a[i].c2x = a[i].c2x.toFixed(1)
                a[i].c2x = parseFloat(a[i].c2x)
                a[i].c2y = a[i].c2y.toFixed(1)
                a[i].c2y = parseFloat(a[i].c2y)
                a[i].ex = a[i].ex.toFixed(1)
                a[i].ex = parseFloat(a[i].ex)
                a[i].ey = a[i].ey.toFixed(1)
                a[i].ey = parseFloat(a[i].ey)
            }
            return a
        },
        bethelDraw(point, is_fill, color) {
            let ctx = this.ctx
            ctx.beginPath()
            ctx.moveTo(point[0].mx, point[0].my)
            if (undefined != color) {
                ctx.setFillStyle(color)
                ctx.setStrokeStyle(color)
            } else {
                ctx.setFillStyle(point[0].color)
                ctx.setStrokeStyle(point[0].color)
            }
            for (let i = 1; i < point.length; i++) {
                ctx.bezierCurveTo(point[i].c1x, point[i].c1y, point[i].c2x, point[i].c2y, point[i].ex, point[i].ey)
            }
            ctx.stroke()
            if (undefined != is_fill) {
                ctx.fill() //填充图形 ( 后绘制的图形会覆盖前面的图形, 绘制时注意先后顺序 )
            }
            ctx.draw(true)
        },
        //设置canvas背景色  默认导出的canvas的背景为透明
        //@params：字符串  color
        setCanvasBg(color) {
            this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight)
            this.ctx.setFillStyle(color)
            this.ctx.fill() //设置填充
            this.ctx.draw() //开画
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    padding-top: var(--total-height);
}
.title {
    transform: rotate(90deg);
    position: fixed;
    top: calc(60rpx + var(--total-height));
    right: 0;
    z-index: 10;
}
.btns {
    transform: rotate(90deg);
    position: fixed;
    bottom: calc(150rpx + constant(safe-area-inset-bottom));
    bottom: calc(150rpx + env(safe-area-inset-bottom));
    left: -90rpx;
    z-index: 10;
    view {
        width: 140rpx;
        height: 60rpx;
        border-radius: 30rpx;
        &:first-child {
            background: #666;
        }
        &:last-child {
            background: #169BD5;
        }
    }
}
.handCenter {
    border: 1px dashed #ccc;
}
</style>